<template>
	<view class="content">
		<view class="work-box">
			<view class="work-content">
				<view class="work-item">
					<view class="itemTitle">工单单别：
						<uv-input placeholder="" border="surround" v-model="strWorker.TA002" disabled></uv-input>
					</view>
					<view class="itemTitle">工单单号：
						<uv-input placeholder="" border="surround" v-model="strWorker.TA001" disabled></uv-input>
					</view>
					<view class="itemTitle">产品品号：
						<uv-input placeholder="" border="surround" v-model="strWorker.TA006" disabled></uv-input>
					</view>
					<view class="itemTitle">本序工艺：
						<uv-input placeholder="" border="surround" v-model="strWorker.TA004" disabled></uv-input>
					</view>
					<view class="itemTitle">产品品名：
						<uv-input placeholder="" border="surround" v-model="strWorker.TA034" disabled></uv-input>
					</view>
					<view class="itemTitle">本序工艺说明：
						<uv-input placeholder="" border="surround" v-model="strWorker.TA024" disabled></uv-input>
					</view>
					<view class="itemTitle">产品规格：
						<uv-input placeholder="" border="surround" v-model="strWorker.TA035" disabled></uv-input>
					</view>
					<view class="itemTitle">工作中心/工艺商：
						<uv-input placeholder="" border="surround" v-model="strWorker.TA021" disabled></uv-input>
					</view>
					<view class="itemTitle">机器设备：
						<uv-input placeholder="" border="surround" v-model="strWorker.MJ002" disabled></uv-input>
					</view>
					<view class="itemTitle">状态：
						<uv-input placeholder="" border="surround" v-model="strWorker.turnoverStatus === '1' ? '未开工' :
						           strWorker.turnoverStatus === '2' ? '开始' :
						           strWorker.turnoverStatus === '3' ? '暂停' :
						           strWorker.turnoverStatus === '4' ? '结束' : '未开工1111'" disabled></uv-input>
					</view>
				</view>
				<view class="operate-box">
					<view class="operate">
						<view class="operate-btn iconbf" @click="handleOperate(2,1)">
							<image src="../../static/icon/icon-bf.png" mode="widthFix">
							</image>
						</view>
						<view class="operate-btn iconzt" @click="handleOperate(3,2)">
							<image src="../../static/icon/icon-zt.png" mode="widthFix">
							</image>
						</view>
						<view class="operate-btn icondy" @click="handleOperate(4,3)">
							<image src="../../static/icon/icon-dy.png" mode="widthFix">
							</image>
						</view>

					</view>
					<!-- <view class="color-333  size-32 weight-600 ">0</view> -->
				</view>
			</view>
		</view>
		<!-- 列表信息 -->
		<uni-table border stripe emptyText="暂无更多数据" ref="tableRefNumber" style="">
			<!-- 表头行用于固定 -->
			<uni-tr class="uni-table-header">
				<uni-th align="center" width="50px">序列</uni-th>
				<uni-th align="center" width="50px">开始时间</uni-th>
				<uni-th align="center" width="50px">结束时间</uni-th>
				<uni-th align="center" width="50px">工时</uni-th>

			</uni-tr>
			<uni-tr v-for="(item,index) in strWorker.list" :key="index">
				<uni-td align="center">{{item.sort}}</uni-td>
				<uni-td align="center">{{item.startTime}}</uni-td>
				<uni-td align="center">{{item.endTime}}</uni-td>
				<uni-td align="center">{{item.manHour}}</uni-td>
			</uni-tr>

		</uni-table>

	</view>
</template>

<script>
	import {
		$get,
		$post
	} from '@/utils/request';
	import {
		getCurrentTime,
		getTimeDifference
	} from '@/utils/dateUtil.js';
	export default {
		data() {
			return {
				value: '111',
				receivedItem: {},
				strWorker: {
					list: []
				}, //查询开工信息列表
			};
		},
		onLoad(options) {
			if (options.item) {
				this.receivedItem = JSON.parse(decodeURIComponent(options.item))

			}
		},
		onShow() {
			this.getInfo()
		},
		methods: {
			getInfo() {
				$get('quality/bigScreenApp/appInfo', {
					TA001: this.receivedItem.TA001,
					TA002: this.receivedItem.TA002,
					TA003: this.receivedItem.TA003,
					TA004: this.receivedItem.TA004,
					TA006: this.receivedItem.TA006,
					companyCode: uni.getStorageSync('companyCode')
				}).then(res => {
					if (res.code == 200) {
						if (!res.data.list) {
							res.data.list = []
						}
						this.strWorker = res.data
					} else {
						uni.showToast({
							title: res.msg,
							icon: "error"
						});
					}

				})
			},
			handleOperate(val, type) { //操作按钮
				const {
					list,
					turnoverStatus,
					...newStrWorker
				} = this.strWorker;
				newStrWorker.turnoverStatus = val //流转状态
				newStrWorker.type = type
				newStrWorker.companyCode = uni.getStorageSync('companyCode')
				if (this.strWorker.turnoverStatus === '4') {
					uni.showToast({
						icon: "none",
						title: "已经结束了当前机器流转"
					})
					return;
				}

				if (val === 2) { //开始按钮

					if (this.strWorker.turnoverStatus === '2') {
						uni.showToast({
							icon: "none",
							title: "已经是开工状态"
						})
						return;
					}

					let data = {
						sort: this.getNumber(this.strWorker.list.length + 1),
						startTime: getCurrentTime(),
					}
					this.strWorker.list.push(data)
					newStrWorker.sort = data.sort
					newStrWorker.startTime = data.startTime
					this.postAddTurn(newStrWorker)
				} else if (val === 3) { //暂停按钮
					if (this.strWorker.turnoverStatus === '3') {
						uni.showToast({
							icon: "none",
							title: "机器已经处于暂停"
						})
						return;
					}

					// 获取list数组
					const list = this.strWorker.list || [];
					// 获取最后一个元素
					const lastItem = list.length > 0 ? list[list.length - 1] : null;
					newStrWorker.turnoverHoodId = lastItem.turnoverHoodId
					newStrWorker.endTime = getCurrentTime()
					// 拿到开始时间计算工时
					// 开始时间
					const startTime = lastItem.startTime;
					// 计算时间差
					const diffResult = getTimeDifference(startTime);
					newStrWorker.manHour = diffResult.hhmmss
					this.postAddTurn(newStrWorker)

				} else if (val === 4) { //提交按钮
					// 获取list数组
					const list = this.strWorker.list || [];
					// 获取最后一个元素
					const lastItem = list.length > 0 ? list[list.length - 1] : null;
					newStrWorker.turnoverHoodId = lastItem.turnoverHoodId
					newStrWorker.endTime = getCurrentTime()
					// 拿到开始时间计算工时
					// 开始时间
					const startTime = lastItem.startTime;
					// 计算时间差
					const diffResult = getTimeDifference(startTime);
					newStrWorker.manHour = diffResult.hhmmss
					this.postAddTurn(newStrWorker)

				}

			},
			getNumber(length) {
				let str = `${length}`
				if (str.length === 1) {
					return '00' + str
				} else {
					return '0' + str
				}
			},
			postAddTurn(item) {
				console.log(item);
				$post('quality/bigScreenApp/addTurn', item).then(res => {
					if (res.code == 200) {
						this.getInfo()
					}

				})
			}





		}
	}
</script>

<style lang="less">
	.content {
		padding: 30px;
		box-sizing: border-box;
	}

	.work-box {
		display: flex;
		gap: 20px;
		margin-bottom: 50px;

		.work-content {
			width: 100%;
			padding: 30px;
			box-sizing: border-box;
			background-color: white;
			border-radius: 10px;
			box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
			display: flex;
			justify-content: space-between;

			.work-item {
				width: 50%;
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				gap: 10px;
				color: #333;
				font-size: 18px;

				.itemTitle {
					// width: 40%;
					display: flex;
					align-items: center;
				}
			}

			.operate-box {
				width: 40%;
				display: flex;
				justify-content: center;
				flex-direction: column;
				align-items: center;
				gap: 40px;

				.operate {

					display: flex;
					align-items: center;
					gap: 50px;

					.iconzt {
						background-color: #fff;
						border: 3px solid #2C7FEC;
					}

					.iconbf {
						background-color: #70D072;
						border: 3px solid #333;
					}

					.icondy {
						background-color: #FD8630;
						border: 3px solid #333;
					}


					.operate-btn {
						width: 80px;
						height: 80px;
						display: flex;
						justify-content: center;
						align-items: center;
						border-radius: 50%;

						image {
							width: 40%;
							border-radius: 50%;
						}
					}
				}

			}
		}


	}
</style>